import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';

export class Navigation extends Component {
    constructor(props) {
        super(props)

        const token = sessionStorage.getItem("token") //get token from local storage 
        let loggedIn = true
        if (token == null) {
            loggedIn = false
        }

        this.state = {
            loggedIn
        }
    }

    logout(event)
    {
        event.preventDefault();
        fetch(process.env.REACT_APP_API_LOGIN + 'Login' + '/Logout', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            credentials: 'include',
        })

    }

    render() {
        if (this.state.loggedIn) {
            return (

                <Navbar bg="dark" expand="lg">
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav>
                            <NavLink className="d-inline p-2 bg-dark text-white" to={this.logout}>
                                Logout
                        </NavLink>
                       
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            )
        } else {
            return (

                <Navbar bg="dark" expand="lg">
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav>
                            <NavLink className="d-inline p-2 bg-dark text-white" to="/">
                                Home
                        </NavLink>
                            <NavLink className="d-inline p-2 bg-dark text-white" to="/signin">
                                Sign in
                        </NavLink>
                            <NavLink className="d-inline p-2 bg-dark text-white" to="/register">
                                Register
                        </NavLink>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            )
        }
    }
}